<script setup>
import { ref, watch, onMounted } from "vue";
  const innerWidth = ref(false)
  onMounted(() => {
    window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
  })
  const handleResize = () => {
    window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
  };
  watch(() => window.innerWidth, handleResize);
  const show1=ref(false)
  const show2=ref(false)
  const show3=ref(false)
  const xuan=()=>{
    show1.value=!show1.value
    show2.value=false
    show3.value=false
  }
  const xiu=()=>{
    show1.value=false
    show2.value=!show2.value
    show3.value=false
  }
  const kai=()=>{
    show1.value=false
    show2.value=false
    show3.value=!show3.value
  }
  const toSWAP=()=>{
  router.push({
    path: '/SWAP'
  })
  }
  const toANAL=()=>{
  router.push({
    path: '/ANAL'
  })
  }
  const toRUNE=()=>{
  router.push({
    path: '/RUNE'
  })
  }
</script>

<template>
  <div>
    <div v-if="innerWidth" class="KOfooter">
       <div style="display: flex; justify-content: space-between ;padding-bottom: 20px; border-bottom: 1px solid #c1bfbf ;">
        <div style="display: flex; margin-top: 20px;">
          <div style="width: 230px; line-height: 30px;">
            <div style="font-weight: 700;">選購與部落格</div>
            <div @click="toSWAP">分類</div>
            <div @click="toANAL">主題</div>
            <div @click="toRUNE">媒體</div>
          </div>
          <div style="width: 230px;line-height: 30px;">
            <div style="font-weight: 700;">條款細則</div>
            <div>商店政策</div>
            <div>退換政策</div>
            <div>購買指引</div>
          </div>
          <div style="width: 230px;line-height: 30px;">
            <div style="font-weight: 700;">關於FIRR</div>
            <div>品牌理念</div>
            <div>聯絡我們</div>
            <div>創業計畫</div>
          </div>
       </div>
        <div style="margin-top: 20px;">
          <img style="width: 20px; height: 20px; margin-right: 20px;" src="https://cdn.quickper.com/static/img/icons/line.png" alt="">
          <img style="width: 20px; height: 20px; margin-right: 20px;" src="https://cdn.quickper.com/static/img/icons/instagram.png" alt="">
          <img style="width: 20px; height: 20px; margin-right: 20px;" src="https://cdn.quickper.com/static/img/icons/facebook.png" alt="">
        </div>
       </div>
       <div style="margin-top: 20px; color: #a1a1a1; display: flex; justify-content: space-between;">
        <div>Taiwan / 台灣 (1.4.136 1.4.17) Copyright © 2024 FIRR All rights reserved</div>
        <div style="font-weight: 700; color:#000 ">FIRR</div>
       </div>
    </div>
    <div v-else class="KOfooters">
      <div @click="xuan" style="display: flex; justify-content: space-between; width: 100%; height: 50px; line-height: 50px; border-top: 1px solid #eae7e7; border-bottom: 1px solid #eae7e7; padding-left:5%; padding-right: 5%;">
        <div style="font-weight: 700;">選購與部落格</div>
        <svg style="width: 20px; height: 20px; margin-top:15px ;" t="1706506863365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4202" width="200" height="200"><path d="M966.4 323.2c-9.6-9.6-25.6-9.6-35.2 0l-416 416-425.6-416c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l441.6 432c9.6 9.6 25.6 9.6 35.2 0l435.2-432C976 345.6 976 332.8 966.4 323.2z" p-id="4203"></path></svg>
      </div>
      <div v-if="show1" class="fade-transition" style="padding-left: 5%;">
        <div style="width: 100%; height: 50px; line-height: 50px; border-top: 1px solid #eae7e7; border-bottom: 1px solid #eae7e7; padding-left:5%; padding-right: 5%;">
          <div>分類</div>
        </div>
        <div style="width: 100%; height: 50px; line-height: 50px; border-top: 1px solid #eae7e7; border-bottom: 1px solid #eae7e7; padding-left:5%; padding-right: 5%;">
          <div>主題</div>
        </div>
        <div style="width: 100%; height: 50px; line-height: 50px; border-top: 1px solid #eae7e7; border-bottom: 1px solid #eae7e7; padding-left:5%; padding-right: 5%;">
          <div>媒體</div>
        </div>
      </div>

      <div @click="xiu" style="display: flex; justify-content: space-between; width: 100%; height: 50px; line-height: 50px; border-top: 1px solid #eae7e7; border-bottom: 1px solid #eae7e7; padding-left:5%;padding-right: 5%;">
        <div style="font-weight: 700;">條款細則</div>
        <svg style="width: 20px; height: 20px; margin-top:15px ;" t="1706506863365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4202" width="200" height="200"><path d="M966.4 323.2c-9.6-9.6-25.6-9.6-35.2 0l-416 416-425.6-416c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l441.6 432c9.6 9.6 25.6 9.6 35.2 0l435.2-432C976 345.6 976 332.8 966.4 323.2z" p-id="4203"></path></svg>
      </div>
      <div v-if="show2" class="fade-transition" style="padding-left: 5%;">
        <div style="width: 100%; height: 50px; line-height: 50px; border-top: 1px solid #eae7e7; border-bottom: 1px solid #eae7e7; padding-left:5%; padding-right: 5%;">
          <div>商店政策</div>
        </div>
        <div style="width: 100%; height: 50px; line-height: 50px; border-top: 1px solid #eae7e7; border-bottom: 1px solid #eae7e7; padding-left:5%; padding-right: 5%;">
          <div>退換政策</div>
        </div>
        <div style="width: 100%; height: 50px; line-height: 50px; border-top: 1px solid #eae7e7; border-bottom: 1px solid #eae7e7; padding-left:5%; padding-right: 5%;">
          <div>購買指引</div>
        </div>
      </div>

      <div @click="kai" style="display: flex; justify-content: space-between; width: 100%; height: 50px; line-height: 50px; border-top: 1px solid #eae7e7; border-bottom: 1px solid #eae7e7; padding-left:5%;padding-right: 5%;">
        <div style="font-weight: 700;">關於FIRR</div>
        <svg style="width: 20px; height: 20px; margin-top:15px ;" t="1706506863365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4202" width="200" height="200"><path d="M966.4 323.2c-9.6-9.6-25.6-9.6-35.2 0l-416 416-425.6-416c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l441.6 432c9.6 9.6 25.6 9.6 35.2 0l435.2-432C976 345.6 976 332.8 966.4 323.2z" p-id="4203"></path></svg>
      </div>
      <div v-if="show3" class="fade-transition" style="padding-left: 5%;">
        <div style="width: 100%; height: 50px; line-height: 50px; border-top: 1px solid #eae7e7; border-bottom: 1px solid #eae7e7; padding-left:5%; padding-right: 5%;">
          <div>品牌理念</div>
        </div>
        <div style="width: 100%; height: 50px; line-height: 50px; border-top: 1px solid #eae7e7; border-bottom: 1px solid #eae7e7; padding-left:5%; padding-right: 5%;">
          <div>聯絡我們</div>
        </div>
        <div style="width: 100%; height: 50px; line-height: 50px; border-top: 1px solid #eae7e7; border-bottom: 1px solid #eae7e7; padding-left:5%; padding-right: 5%;">
          <div>創業計畫</div>
        </div>
      </div>

      <div style="margin-top: 10px; display: flex; margin-left:5% ;">
          <img style="width: 20px; height: 20px; margin-right: 20px;" src="https://cdn.quickper.com/static/img/icons/line.png" alt="">
          <img style="width: 20px; height: 20px; margin-right: 20px;" src="https://cdn.quickper.com/static/img/icons/instagram.png" alt="">
          <img style="width: 20px; height: 20px; margin-right: 20px;" src="https://cdn.quickper.com/static/img/icons/facebook.png" alt="">
      </div>
      <div style="margin-top:10px; padding-left: 5%;">
          <span style="color: #a1a1a1;">Taiwan / 台灣 (1.4.136 1.4.17)  </span><br>
          <span style="color: #a1a1a1;">Copyright © 2024 FIRR All rights reserved</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .KOfooter{
    margin-top: 30px;
    width: 100%;
    height: 250px;
    position: relative;
    bottom: 0px;
    border-top: 1px solid #f8f8f8;
    padding-left: 20%;
    padding-right:20% ;
  }
  .KOfooters{
    margin-top: 50px;
    width: 100%;
    height: 250px;
    position: relative;
    bottom: 0px;
  }
</style>